<template>
	<base-popup :modelValue="modelValue" @close="onClose" :title="$t('usdtAddressAdd.title')">
		<div class="usdt-address-add">
			<!--			<wallet-header :type="WalletType.usdt.id" :is-link="false" />-->
			<div class="py-[15px] px-[25px]">
				<usdt-network-select v-model:show="usdtNetworkSelectShow" v-model="selectNetwork" />
				<base-input
					v-model="address"
					:maxlength="BANK_USDT_MAX_LIMIT"
					:label="$t('usdtAddressAdd.address')"
					:error="addressError"
					clearable>
					<template #suffix v-if="!address">
						<base-paste @paste="onPaste" />
					</template>
				</base-input>

				<template v-if="!isShowMobile">
					<base-input
						v-model="code"
						type="code"
						:error="codeError"
						:maxlength="6"
						:label="$t('usdtAddressAdd.enterVerificationCode')"
						clearable>
						<template #suffix>
							<base-code
								:type="AccountType.mobile"
								:codeType="CodeType.addUsdt"
								:disabled="!isMobileValue"
								:nameData="mobile" />
						</template>

						<template #error>
							<div class="flex items-center">
								<!--								<base-field-error :isIcon="0" :text="codeError" v-if="codeError"></base-field-error>-->
							</div>
						</template>
					</base-input>
					<p class="text-t-2 text-sm h-[14px]">
						{{
							t('usdtAddressAdd.contact', {
								contact: fmtMobile(mobile)
							})
						}}
					</p>
				</template>
				<template v-else>
					<base-input
						v-model="code"
						type="code"
						:maxlength="6"
						:error="codeError"
						:label="$t('binding.emailCodePH')"
						clearable>
						<template #suffix>
							<base-code
								:type="AccountType.email"
								:codeType="CodeType.addUsdt"
								:disabled="!isEmailValue"
								:nameData="email" />
						</template>

						<template #error>
							<div class="flex items-center">
								<!--								<base-field-error :isIcon="0" :text="codeError" v-if="codeError"></base-field-error>-->
							</div>
						</template>
					</base-input>
					<p class="error-tip__text">
						{{ t('usdtAddressAdd.contact', { contact: fmtEmail(email) }) }}
					</p>
				</template>

				<button
					class="cursor-pointer block h-[20px] text-primary mt-4 bg-transparent"
					v-if="isShowSwitch"
					@click="handleToggleValida">
					{{ !isShowMobile ? t('usdtAddressAdd.switchEmail') : t('usdtAddressAdd.switchMobile') }}
				</button>

				<base-button
					type="primary"
					block
					round
					:disabled="submitDisabled"
					:loading="loading"
					@click="onSubmit"
					class="my-[80px]">
					{{ t('usdtAddressAdd.submit') }}
				</base-button>
			</div>
		</div>
	</base-popup>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { addCryptoAddress } from '@/api/wallet'
import { BANK_USDT_MAX_LIMIT } from '@/constants'
import { useProfileStore, useWalletStore } from '@/store'
import { AccountType, CodeType, UsdtNetwork } from '@/enums'
import { BaseButton, BaseCode, BaseInput, BasePaste, BasePopup } from '@/components/base'
import { fmtEmail, fmtMobile, isCode, isEmail, isMobile, showError, showSuccess, t } from '@/utils'
// import WalletHeader from '../components/wallet-header.vue'
import UsdtNetworkSelect from '../components/usdt-network-select.vue'

const profileStore = useProfileStore()
const walletStore = useWalletStore()

const mobile: any = computed(() => profileStore.userInfo?.mobile)
const email: any = computed(() => profileStore.userInfo?.email)
const isShowSwitch = computed(() => mobile.value && email.value)
const modelValue = computed(() => walletStore.showWalletUsdtAddressSelectPopup)
const codeError = computed(() => (code.value && !isCode(code.value) ? t('error.code') : ''))
const code = ref('')
const network: any = ref(UsdtNetwork.trx.id)
const selectNetwork: any = ref(walletStore.depositData.cryptoCode)
const networkError = ref('')
const usdtNetworkSelectShow = ref(false)
const address = ref('')
const loading = ref(false)
const isShowMobile = ref(!!email.value)
// const selectedItem: any = ref({})
// const rechargeTypeSelectShow = ref(false)

const addressError = computed(() => {
	const reg = /^[A-Za-z0-9]+$/
	const addressErrorText = t('usdtAddressAdd.addressErrorText')
	if (address.value) {
		if (!reg.test(address.value)) {
			return addressErrorText
		} else if (network.value === UsdtNetwork.trx.id) {
			const firstChar = address.value.slice(0, 1)
			if (firstChar.toLowerCase() !== 't') {
				return addressErrorText
			}
		} else {
			const firstChar = address.value.slice(0, 2)
			if (firstChar !== '0x') {
				return addressErrorText
			}
		}
	}
	return ''
})
const isEmailValue = computed(() => isEmail(email.value) && address.value && !addressError.value)
const isMobileValue = computed(() => isMobile(mobile.value) && address.value && !addressError.value)

const submitDisabled = computed(
	() =>
		!network.value ||
		!!networkError.value ||
		!address.value ||
		!code.value ||
		!!addressError.value ||
		!!codeError.value ||
		(!isEmailValue.value && !isMobileValue.value)
)

const onPaste = (text: string) => (address.value = text)

function handleToggleValida() {
	code.value = ''
	isShowMobile.value = !isShowMobile.value
}

const onSubmit = async () => {
	if (codeError.value) {
		return
	}
	try {
		loading.value = true
		const params = {
			crypto: 'usdt',
			network: network.value,
			address: address.value,
			code: code.value,
			type: !isShowMobile.value ? 2 : 1
		}
		await addCryptoAddress(params)
		// store.dispatch('wallet/getCryptoAddresses')
		await walletStore.getCryptoAddresses()
		loading.value = false
		showSuccess(t('message.saveSuccess'))
		resetData()
		// router.back()
		onClose()
	} catch (error: any) {
		loading.value = false
		showError(error)
	}
}

const resetData = () => {
	network.value = UsdtNetwork.trx.id
	address.value = ''
	code.value = ''
}

const onClose = () => {
	walletStore.setWalletUsdtAddressSelectPopupShow(false)
}
</script>
<style lang="scss" scoped></style>
